• 什麼是Flow Chart?為什麼要使用Flow Chart?

　　　創造一個網站時，當你釐清使用者的痛點與需求，也確定好網站需要呈現的資訊及功能，這時候先別急著畫線框圖(Wireframe)，為了確保使用者在網站中的操作流程和互動步驟是流暢的，以及更好的與開發人員合作，我們會先繪製「Flow Chart」。

• Flow Chart示意圖:

(參考資料Figma Community，也可以在這裡看更詳盡的介紹喔!)

看完你一定會覺得很疑惑，那不同的形狀代表著什麼意思?顏色又是什麼呢?以下做介紹:

• 形狀
  

1. 流程的起點與終點:可以想成是每個功能的起始點及終點。
2. 決策:類似於判斷條件，以一個APP的登入過程為例，透過菱形形狀的判斷，決定不同的輸出結果：若登入成功，則顯示特定畫面；若登入失敗，則呈現另一畫面。
3. 處理流程:代表執行一個動作或呈現一頁面。
4. 資料庫:用來儲存資料的地方。
5. 資料的輸入和輸出:例如，使用者輸入帳號和密碼。

• 顏色
  關於顏色的部分，你可以根據自己的習慣進行自訂。以我個人的習慣來說，當相同的形狀代表不同處理事項時，我習慣使用不同的顏色來加以區分。舉例來說，對於所有長方形形狀表示的處理流程，我可能會選擇使用一種顏色來標示顯示畫面，而另一種顏色用於表示執行動作。這個方式有助於使不同類型的操作更加清晰可辨識。

• UI/UX實例分析:打卡系統<實作Flow Chart>

接下來讓我們進入實作的部分，我們會拿昨天文章中的實例分析:打卡系統來做繪製。
這邊以登入系統的功能做實戰演練。

1. 首先進入到Figma首頁，先進行登入或註冊。

2. 完成後你會看到以下的畫面，然後點選紅框區域:FigJam templates的Diagram Basics，就是我們要繪製Flow Chart的地方喔!
   

3. 點開之後你會看到以下畫面，圖片下方有常用工具之介紹:
   

4. 開始實作「登入功能Flow Chart」:
   

• 回家作業:請延續登入的功能，完成簽到功能之Flow Chart!

相信大家經過以上的實作，已經明白Flow Chart的概念及繪製方法了，但要動手自己做才能加深印象，所以這邊出了一個小小的作業讓大家做練習，若真的不知道如何下手，可以參考這邊有提供簡單的範例喔!

• 結論

　　　今天我們探討了Flow Chart的概念和重要性，並實際進行了繪製的操作。希望大家已經都充分理解並掌握這個工具了!明天，我會繼續使用Figma，按照簽到功能的Flow Chart來繪製線框圖。
那今天就到這裡啦!